<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="重置登录密码"
             :white="false">
    </top-bar>
    <page-content>
      <div class="rt-box">
        <div>
          <span class="cf-name">短信验证码</span>
          <input type="text"
                v-model="code"
                 placeholder="请输入验证码"
                 class="cf-input">
          
        </div>
        <van-button class="rt-yzm" :loading="codeLoading" :disabled="down" round @click="sendCode" type="info">
              <span v-if="!down">获取验证码</span>
              <van-count-down v-if="down" @finish="finish" :time="time" format="ss秒" />
            </van-button>
      </div>
      <div class="cf-con">
        <div class="cf-item">
          <span class="cf-name">新密码</span>
          <input type="password"
          v-model="password"
                 placeholder="请输新密码"
                 class="cf-input">
        </div>
        <div class="cf-item">
          <span class="cf-name">确认新密码</span>
          <input type="password"
          v-model="npassword"
                 placeholder="再次输入新密码"
                 class="cf-input">
        </div>
      </div>
      <div class="cf-btn" @click="submit">保存</div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
import { Dialog } from 'vant';
export default {
  data () {
    return {
      //眼睛标识
      pwdFlag: true,
      pwfl: false,
      codeLoading: false,
      npassword: '',
      password: '',
      code: '',
      time: 60000,
      down: false
    }
  },
  components: {
    TopBar,
    PageView,
    PageContent
  },
  mounted () { },
  created(){
    this.user = this.$store.state.user;
  },
  methods: {
    
    finish(){
      this.down = false;
    },

    sendCode(){
      this.codeLoading = true;
      return service.post('/apiGetVerCode.do', {
        phone: this.user.phone,
        type: 2
      }, {
        hideloading: true
      }).then(res=>{
        this.down = true;
        this.codeLoading = false;
      }, ()=> {
        this.codeLoading = false;
      })
    },

    submit(){
      if(!this.code){
        Dialog.alert({
          title: '提示',
          message: '请输入正确的短信验证码！',
          confirmButtonColor: '#585DF9'
        });
        return;
      }

      if(this.password.length < 6 || this.npassword.length < 6){
        Dialog.alert({
          title: '提示',
          message: '请输入6位以上的密码！',
          confirmButtonColor: '#585DF9'
        });
        return;
      }

      if(this.password != this.npassword){
        Dialog.alert({
          title: '提示',
          message: '两次密码输入不一致！',
          confirmButtonColor: '#585DF9'
        });
        return;
      }

      return service.post('/apiChangePassword.do', {
        phone: this.user.phone,
        password: this.password,
        code: this.code
      }).then(res=>{
        this.$store.dispatch('logout');
        this.$router.push({
          path: '/login/0'
        })
      }, ()=> {
        this.codeLoading = false;
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.rt-box {
  height: 55px;
  line-height: 55px;
  background: #fff;
  padding: 0 20px;
  margin-top: 86px;
  display: flex;
  justify-content: space-between;
  .rt-yzm {
    padding: 0;
    height: 54px;
    font-size: 14px;
    font-weight: 400;
    color: #585df9;    
    line-height: 54px;
    background-color: transparent;
    border: none;
  }
  .cf-name {
    display: inline-block;
    width: 100px;
    font-size: 16px;
    color: #3d3e54;
  }
  .cf-input {
    border: 0;
    font-size: 16px;
    font-weight: 400;
    color: #7a7886;
    width: 150px;
  }
}
.cf-con {
  height: 110px;
  box-sizing: border-box;
  background: #fff;
  padding: 0 20px;
  margin-top: 16px;
  .cf-item {
    height: 55px;
    line-height: 55px;
    .cf-name {
      display: inline-block;
      width: 100px;
      font-size: 16px;
      color: #3d3e54;
    }
    .cf-input {
      border: 0;
      font-size: 16px;
      font-weight: 400;
      color: #7a7886;
    }
  }
}
.cf-btn {
  width: 335px;
  height: 57px;
  line-height: 57px;
  background: #585df9;
  border-radius: 29px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 95px;
}
</style>
